const inp = document.querySelector('.h_center>input')
const sousuo = document.querySelector('.sousuo')
const login = document.querySelector('.h_right_2')
const login_1 = document.querySelector('.h_right_1_1')
const ul1 = document.querySelector('.sousuo>ul')

//登录成功token  改用户名
const id = window.localStorage.getItem('id')

testLogin()
function testLogin() {
  const token = window.localStorage.getItem('token')
  if (!id || !token) {
    return
  }
  const xhr = new XMLHttpRequest()
  xhr.open('GET', 'http://localhost:8888/users/info?id=' + id)
  xhr.onload = function () {
    const res = JSON.parse(xhr.responseText)
    if (res.code === 1) {
      login.innerHTML = res.info.nickname
      login.onclick = () => {
        // 执行退出登录的操作
        // 3-1. 确认是否真的退出
        if (!window.confirm('您确定退出登录吗 ?')) return
      
        // 3-2. 执行退出
        // 把 localStorage 内的内容删除
        window.localStorage.removeItem('token')
        window.localStorage.removeItem('id')
      
        // 3-2. 发送请求到服务器
        // 让服务器把这个 token 立即过期
        ajax({
          url: 'http://localhost:8888/users/logout',
          data: 'id=' + id,
          success () {
            // 刷新页面
            window.location.reload()
          }
        })
      }
    }
  }
  xhr.setRequestHeader('authorization', token)
  xhr.send()

  
}


const tui = document.querySelector('.tui1')
const pro = document.querySelector('.pro>ul')
const nav = document.querySelector('.nav>ul')

const container = document.querySelector('.banner>.swiper-container>.swiper-wrapper')

const caozuo = document.querySelector('.caozuo>.caozuodiv1')

nav.onclick = function (e) {
    e = e || window.event
    var target = e.target || e.srcElement
    if (target.nodeName === 'LI') {
        window.location.href = './03.list.html'
    }
}
login_1.onclick = function () {
    window.location.href = './01.login.html'
}


const xhr = new XMLHttpRequest()
xhr.open('GET', '/sousuo')
xhr.onload = function () {
    let str = ''
    let res = JSON.parse(xhr.responseText)
    inp.value = `${res.data.defaultKey}`
    res.data.configKey.forEach(function (item, index) {
        str += `
        <li>${item[index + 1]}</li>
        `
    })
    sousuo.innerHTML = str
}
xhr.send()


//轮播图
const xhr0 = new XMLHttpRequest()
xhr0.open('GET', '/banner')
xhr0.onload = function () {
    let str = ''
    let res = JSON.parse(xhr0.responseText)
    res.banners.forEach(function (item) {
        str += `<div class="swiper-slide"><img src="${item.picStr}" alt=""></div>`
    })
    container.innerHTML = str
}
xhr0.send()

//推荐商品
const xhr1 = new XMLHttpRequest()
xhr1.open('GET', '/tuijian')
xhr1.onload = function () {
    let str = ''
    let res = JSON.parse(xhr1.responseText)
    res.data.hotProduct.forEach(function (item) {
        str += `<li>
                <img src="${item.products.coverUrl}" alt="">
                <p>${item.name}</p>
                </li>
                `
    })
    tui.innerHTML = str
}
xhr1.send()

tui.onclick = function (e) {
    e = e || window.event
    var target = e.target || e.srcElement
    if (target.nodeName === 'LI') {
        window.location.href = './02.fangdajing.html'
    }
}

//热门商品
const xhr2 = new XMLHttpRequest()
xhr2.open('GET', '/pro')
xhr2.onload = function () {
    let str = ''
    let res = JSON.parse(xhr2.responseText)
    res.data.allProduct.forEach(function (item) {
        str += `<li>
                <img src="${item.coverUrl}" alt="">
                <p>${item.name}</p>
                </li>
                `
    })
    pro.innerHTML = str
}
xhr2.send()

pro.onclick = function (e) {
    e = e || window.event
    var target = e.target || e.srcElement
    if (target.nodeName === 'LI') {
        window.location.href = './02.fangdajing.html'
    }
}

inp.onfocus = function () {
    sousuo.style.display = 'block'
}
inp.onblur = function () {
    sousuo.style.display = 'none'
}
login.onmouseover = function () {
    login_1.style.display = 'block'
}
login.onmouseout = function () {
    login_1.style.display = 'none'
}

window.onscroll = function () {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    if (scrollTop >= 300) {
        caozuo.style.display = 'block'
    } else {
        caozuo.style.display = 'none'
    }
}
caozuo.onclick = function () {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
}

